
import { useState } from 'react';
import store from './store';

export default function ProfileSetting() {
    const [username, setUsername] = useState("");
    const [loading, setLoading] = useState(false);
    // 如果此处不订阅，如果其它地方修改了userName，此处不会实时更新同步的哦
    const propsUsername = store.getState().username;

    return (
        <div className='profile-setting'>
            个人信息设置页面：<br />
            <span style={{ marginRight: '10px' }}>{propsUsername}</span>

            <input placeholder="新用户名"
                value={username}
                onChange={e => setUsername(e.target.value)}
            />
            <button onClick={e => {
                store.dispatch({ type: 'changeUserName', payload: username });
                setUsername('');
                alert('修改成功');
            }}>修改</button>

            <br />
            由后端耗时2s获取未读消息条数：
            <button onClick={() => {
                setLoading(true);
                setTimeout(() => {
                    const unReadCount = Math.floor(Math.random() * 20);
                    store.dispatch({ type: 'getUnreadCount', payload: unReadCount });
                    setLoading(false);
                }, 2000);
            }}

            >{loading ? 'loading...' : '延时获取'}</button>

        </div>
    )
}